<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui" template="/layout/principal.xhtml">

    <ui:define name="content">

        <h1 class="title ui-widget-header ui-corner-all">
            <h:outputText value="Listado de Campañas" />
        </h1>

        <h:form>

            <p:growl id="growl" showDetail="true" life="3000" />

            <p:panel header="Filtro">
                <h:panelGrid columns="2">
                    <h:outputLabel value="Estado : " for="estadoId" />
                    <p:selectOneMenu id="estadoId" value="#{campaign.estado}" style="width: 200px;">
                        <f:selectItem itemLabel="Todos" itemValue="" />
                        <f:selectItem itemLabel="Activa" itemValue="A" />
                        <f:selectItem itemLabel="Inactiva" itemValue="I" />
                        <f:selectItem itemLabel="Terminada" itemValue="T" />
                        <p:ajax update="dttCamapign" listener="#{campaign.actualizarLista}" />
                    </p:selectOneMenu>
                </h:panelGrid>
            </p:panel>

            <p:dataTable id="dttCamapign" var="c" value="#{campaign.listCampaign}"
                selection="#{campaign.selectedCampaign}" paginator="true" rows="10">
                <p:column selectionMode="single" />

                <p:column headerText="Nombre">
                    <h:outputText value="#{c.nombre}" />
                </p:column>

                <p:column headerText="Rango de Fechas">
                    <h:outputText value="#{c.fchInicio}">
                        <f:convertDateTime pattern="yyyy-MM-dd" />
                    </h:outputText>
                    <h:outputText value=" - " />
                    <h:outputText value="#{c.fchFinal}">
                        <f:convertDateTime pattern="yyyy-MM-dd" />
                    </h:outputText>
                </p:column>

                <p:column headerText="Horario Diario">
                    <h:outputText value="#{c.horaInicio}">
                        <f:convertDateTime pattern="HH:mm:ss" />
                    </h:outputText>
                    <h:outputText value=" - " />
                    <h:outputText value="#{c.horaFinal}">
                        <f:convertDateTime pattern="HH:mm:ss" />
                    </h:outputText>
                </p:column>

                <p:column headerText="Intentos">
                    <h:outputText value="#{c.intentos}" />
                </p:column>

                <p:column headerText="Troncal">
                    <h:outputText value="#{c.troncal}" />
                </p:column>

                <p:column headerText="Cola">
                    <h:outputText value="#{c.cola}" />
                </p:column>

                <p:column headerText="Llamadas Completadas">
                    <h:outputText value="#{c.completado}" />
                </p:column>

                <p:column headerText="Promedio">
                    <h:outputText value="#{c.promedio}" />
                </p:column>

                <p:column headerText="Estado">
                    <h:outputText value="#{c.estado}" />
                </p:column>
            </p:dataTable>

            <p:panel header="Opciones">
                <h:panelGrid columns="5">
                    <p:commandButton value="Nuevo" action="goCrearCampaign" style="width: 200px;" ajax="false" />
                    <p:commandButton value="Editar" action="goModificarCampaign" actionListener="#{campaign.load}"
                        ajax="false" style="width: 200px;" />
                    <p:commandButton value="Activar" action="#{campaign.activar}" update="dttCamapign"
                        style="width: 200px;" />
                    <p:commandButton value="Desactivar" action="#{campaign.desactivar}" update="dttCamapign"
                        style="width: 200px;" />
                    <p:commandButton value="Eliminar" action="#{campaign.eliminar}" style="width: 200px;" />
                </h:panelGrid>
            </p:panel>

        </h:form>

    </ui:define>
</ui:composition>